<template>
  <div class="body">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="60%" :close-on-click-modal="false"
               @close="close">
      <el-form :inline="true" :model="formInline" label-width="120px" class="demo-form-inline searchform">
        <div class="mar_b20">
          <el-form-item label="按门店名称：">
            <el-input v-model="formInline.keyword" size="medium" placeholder="请输入门店名称搜索" style="width: 200px;"
                      @input="onSearch"></el-input>
          </el-form-item>
<!--          <el-form-item label="按门店类别：">-->
<!--            <el-select v-model="formInline.type" clearable placeholder="请选择" @change="onSearch">-->
<!--              <el-option v-for="item in typeOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="按门店区域：" class="mar_l20">-->
<!--            <el-select v-model="formInline.areaId" clearable placeholder="请选择" @change="onSearch">-->
<!--              <el-option v-for="item in qyOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="按门店分组：" class="mar_t20">-->
<!--            <el-select v-model="formInline.typeId" clearable placeholder="请选择" @change="onSearch">-->
<!--              <el-option v-for="item in fzOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="按门店标签：">
            <el-select v-model="formInline.label" clearable placeholder="请选择" @change="onSearch">
              <el-option v-for="item in labelOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="按商品模式：">
            <el-select v-model="formInline.goodsModel" clearable placeholder="请选择" @change="onSearch">
              <el-option v-for="item in typeOptions2" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" size="medium">搜索</el-button>
          </el-form-item>
        </div>
      </el-form>
      <div>
        <el-table v-loading="listLoading" :element-loading-text="elementLoadingText" :data="list" stripe
                  style="width: 100%" @selection-change="setSelectRows">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="商家名称" width="350">
            <template slot-scope="scope">
              <div class="flex flex-y-top">
                <div class>
                  <img class="goodlogo bor_rad5" :src="scope.row.icon"/>
                </div>
                <div class="mar_l10">
                  <div class="flex">
                    <div class>{{ scope.row.name }}</div>
                    <el-tag size="mini" type="info" class="mar_l5">（ID:{{ scope.row.id }}）</el-tag>
                  </div>
                  <div class="fon_12 color_9">
                    类别：
                    <span v-if="scope.row.type=='1'">直营店</span>
                    <span v-else>加盟店</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="门店地址&联系电话">
            <template slot-scope="scope">
              <div>{{ scope.row.address }}</div>
              <div>{{ scope.row.storeTel }}</div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize"
                       :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="close">取 消</el-button>
        <el-button size="medium" type="primary" @click="save">确定同步商品到门店</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {selectStoreCategory, storeList} from '@/api/shop';
import {changeGoods} from '@/api/good';

export default {
  name: 'tbgoods',
  created() {
  },
  data() {
    return {
      formInline: {
        keyword: '',
        typeId: '',
        type: '',
        areaId: '',
        label: ''
      },
      list: [],
      listLoading: false,
      selectRows: '',
      elementLoadingText: '正在同步商品到门店，请稍候...',
      page: {
        total: 0,
        size: 10,
        currentPage: 1
      },
      typeOptions: [
        {
          id: '0',
          name: '全部'
        },
        {
          id: '1',
          name: '直营店'
        },
        {
          id: '2',
          name: '加盟店'
        }
      ],
      typeOptions2: [
        {
          id: '1',
          name: '商品模式一'
        },
        {
          id: '2',
          name: '商品模式二'
        },
        {
          id: '3',
          name: '商品模式三'
        }
      ],
      qyOptions: [],
      fzOptions: [],
      labelOptions: [],
      title: '',
      dialogFormVisible: false,
      goodIds: '',
      allGood: '',
      tbType:'',
    };
  },
  components: {},
  methods: {
    showEdit(row, allGood) {
      if (row) {
        this.title = '选择同步门店';
        this.goodIds = row
        this.selectStoreCategoryM();
        this.storeList();
        this.allGood = allGood
        this.dialogFormVisible = true;
      }
    },
    showEdit2(tbType){
      this.tbType = tbType
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.storeList();
    },
    onSearch() {
      this.storeList();
    },
    async storeList() {
      var params = {
        page: this.page.currentPage,
        // typeId: this.formInline.typeId,
        keyword: this.formInline.keyword,
        // type: this.formInline.type,
        // areaId: this.formInline.areaId,
        label: this.formInline.label,
        goodsModel: this.formInline.goodsModel,
        checkShopGoodsModel: 1,
      };
      const {data, count} = await storeList(params);
      this.list = data ? data : [];
      this.page.total = count;
    },
    async selectStoreCategoryM() {
      const {data} = await selectStoreCategory();
      this.qyOptions = data.area ? data.area : [];
      this.fzOptions = data.type ? data.type : [];
      this.labelOptions = data.label ? data.label : [];
    },
    close() {
      this.dialogFormVisible = false;
    },
    setSelectRows(val) {
      this.selectRows = val;
    },
    async save() {
      if (this.selectRows.length > 0) {
        this.listLoading = true
        const storeIds = this.selectRows.map((item) => item.id);
        let param = {
          goodIds: this.allGood ? 'all' : this.goodIds,
          storeIds,
          goodsType:this.tbType=='2'?2:''
        };
        const {msg} = await changeGoods(param);
        this.$baseMessage(msg, 'success');
        this.listLoading = false
        this.$emit('fetchData');
        this.close();
      } else {
        this.$baseMessage('未选中任何门店', 'error');
        return false;
      }
    }
  }
};
</script>
